<!-- 编辑功能模板 -->
<template>
    <!-- 常规组件 -->
    <div class="fieldInput" v-if="type == 'text' || type == 'textarea'">
        <el-input type="text" class="text" v-model="dataVal" @input="updateValue" :placeholder="theData.allow ? '请输入#'+theData.name+'#' : ''" 
        :disabled="!theData.allow || actionState > 0" :maxlength="theData.maxLength" @focus="focusBorderColor(theData.null)" @blur="blurBorderColor"></el-input>
      </div>
      <div class="fieldInput" v-else-if="type == 'dataSelectSub'">
        <el-input type="text" class="text" v-model="dataVal" style="cursor:wait;" disabled></el-input>
      </div>
      <div class="fieldInput" v-else-if="type == 'int' || type == 'float'">
        <el-input type="number" class="text" v-model="dataVal" @input="updateValue" :placeholder="theData.allow?'请输入#'+theData.name+'#':''" 
        :disabled="!theData.allow || actionState > 0" :maxLength="theData.maxLength" @focus="focusBorderColor(theData.null)" @blur="blurBorderColor"></el-input>
      </div>
      <div class="fieldInput" v-else-if="type == 'radio'">
        <el-checkbox
          v-model="dataVal"
          true-label="1"
          false-label="0"
          :disabled="!theData.allow || actionState > 0"
        ></el-checkbox>
      </div>
      <!-- 日期组件 -->
      <div class="fieldInput" v-else-if="type.trim().toLowerCase().includes('datetime')">
        <el-date-picker
          v-model="dataVal"
          class="dateTime"
          type="date"
          :placeholder="theData.allow ? '选择#'+theData.name+'#' : ''"
          :disabled="!theData.allow || actionState > 0"
          :value-format="dateFormat"
          @change="dateChange"
          @focus="focusBorderColor(theData.null)" 
          @blur="blurBorderColor"
        ></el-date-picker>
      </div>
      <!-- 普通下拉选择组件 -->
      <div class="fieldInput" v-else-if="type == 'select'">
        <el-select
          v-model="dataVal"
          class="select"
          :disabled="!theData.allow || actionState > 0"
          @change="dateChange"
          @focus="focusBorderColor(theData.null)" 
          @blur="blurBorderColor"
        >
          <el-option
            v-for="item in theData.selectItems"
            :label="item.title"
            :value="item.value"          
            :key="item.title"
          ></el-option>
        </el-select>
      </div>
      <!-- 类别下拉选择组件 -->
      <div class="fieldInput" v-else-if="type == 'baseSelect'">
        <el-select
          v-model="dataVal"
          class="dataSelect"
          :disabled="!theData.allow || actionState > 0"
          @change="dateChange"
          @focus="focusBorderColor(theData.null)" 
          @blur="blurBorderColor"
        >
          <el-option
            v-for="item in selectItems"
            :label="item.title"
            :value="item.value"
            :key="item.title"
          ></el-option>
        </el-select>
        <button :class="(!theData.allow || actionState > 0) ? 'butAdd' : 'butNot'" @click="openBaseWindow" 
        :style="(!theData.allow || actionState > 0) ? 'cursor: default;': ''">
          <img :src="(!theData.allow || actionState > 0) ? require('../assets/img/SystemManage_C.png') : require('../assets/img/SystemManage_S.png')" />补充
        </button>
      </div>
      <!-- 数据下拉选择组件+小弹窗 -->
      <div class="fieldInput" v-else-if="type == 'dataSelect'">
        <el-select
          v-model="dataVal"
          class="dataSelect"
          filterable
          remote
          :remote-method="remoteMethod"
          :loading="loading"        
          :value-key="theData.returnKey"
          :disabled="!theData.allow || actionState > 0"
          @visible-change="visibleChange"
          @change="dateReturn"
          @focus="focusBorderColor(theData.null)" 
          @blur="blurBorderColor"
        >
          <el-option
            v-for="item in selectItems"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
        <button :class="(!theData.allow || actionState > 0) ? 'butAdd' : 'butNot'" @click="openDataWindow" 
        :style="(!theData.allow || actionState > 0) ? 'cursor: default;': ''">
          <img :src="(!theData.allow || actionState > 0) ? require('../assets/img/SystemManage_C.png') : require('../assets/img/SystemManage_S.png')" />浏览
        </button>
      </div>
      <div class="fieldInput" v-else>
        -
      </div>
  </template>
  <script>
  import selectData from "./selectData.vue";
  import typeData from "./typeData.vue";
  import { TimePick } from 'element-ui'
  export default {
    data() {
      return {
        type:'',
        dataVal:'',
        dateFormat:'yyyy-MM-dd',
        selectItems:[],
        loading:false,
        quickUrl:'',
        dataId:0
      };
    },
    components:{
      selectData,
      typeData,
      TimePick
    },
    props:{
      theData:{
        type:Object,
        required:true
      },
      theOrg:{
        type:Number,
        required:true
      },
      actionState: {
        type: Number,
        default: () => {
          return 0;
        }
      }
    },
    created() {
      this.dataVal = this.theData.value;
      this.type = this.theData.type;
      this.selectItems = this.theData.selectItems;
      this.quickUrl = this.theData.defaultValue;
      this.checkTimeFormat();
      console.log('created_type:' + this.type);
    },
    mounted() {
      this.dataVal = this.theData.value;
      this.type = this.theData.type;
      this.selectItems = this.theData.selectItems;
      this.quickUrl = this.theData.defaultValue;
      this.checkTimeFormat();
      console.log('mounted_type:' + this.type);
    },
    methods: {
      checkTimeFormat(){
        if(this.type.toLowerCase().includes("datetime")){
          let last = this.type.slice(-1);
          switch(last){
            case "S": this.dateFormat = 'yyyy-MM-dd HH:mm:ss'; break;
            case "M": this.dateFormat = 'yyyy-MM'; break;
            case "T": this.dateFormat = 'HH:mm'; break;
            default: this.dateFormat = 'yyyy-MM-dd'; break;
          }
        }
      },
      // 【远程搜索下拉数据】 dataSelect 下拉快速查询
      async remoteMethod(txtFind) {
        if (txtFind != null && txtFind.trim().length() > 0) {
          this.loading = true;
          setTimeout(() => { //延迟下拉快速搜索
            this.getQuickData(txtFind);
          }, 1000);
        }     
      },
      async getQuickData(txtFind){ //加载下拉快速搜索
        if (txtFind != null && txtFind.trim().length() > 0) {
          let toUrl = this.changeUrl(this.quickUrl+txtFind.trim());
          let { data: res } = await this.$http.get(toUrl);
          if (res.result) {
            this.loading = false;
            this.selectItems = res.obj;
          } else {
            this.clewMsg(res.type,res.mes);
          }
        }
      },
      // 下拉隐藏和显示的时候触发事件
      visibleChange(k) {
        if (!k) {
          this.selectItems = [];
        }
      },
      dataReturn(val){
        console.log(val);
        this.$emit("returnDataSelect", JSON.parse(JSON.stringify(val)), 0);
      },
      updateValue(){
        var theVal = this.dataVal;
        if(this.type == 'int'){
          theVal = theVal.replace(/[^0-9]/g,'');
        }else if(this.type == 'float'){
          theVal = theVal.replace(/[^0-9.]/g,'');
        }
        var theParam = this.theData.paramName;
        if(this.type.toLowerCase().includes("select") || this.type.toLowerCase() == 'radio'){
          theParam = this.theData.actionValue;
        }
        let data = {
          value: theVal,
          param: theParam
        };
        this.$emit('input-updated', data);
      },    
      dateChange(val){
        var theParam = this.theData.paramName;
        let data = {
          value: val,
          param: theParam
        };
        this.$emit('input-updated', data);
      },
      openBaseWindow(){
        if(this.theData.allow && this.actionState == 0){
          let postUrl = this.changeUrl(this.theData.actionUrl);
          console.log("openWinUrl:" + postUrl);
          let data = {
            win: 'base',
            type: 'none',
            openUrl: postUrl
          };
          this.$emit('openWinUrl', data);
        }      
      },
      openDataWindow(){
        if(this.theData.allow && this.actionState == 0){
          let postUrl = this.changeUrl(this.theData.actionUrl);
          console.log("openWinUrl:" + postUrl);
          let data = {
            win: 'data',
            type: 'select',
            openUrl: postUrl
          };
          this.$emit('openWinUrl', data);
        }      
      },
      selectChange(val){
        var theParam = this.theData.paramName;
        let data = {
          value: val,
          param: theParam
        };
        this.$emit('input-updated', data);
      },
      focusBorderColor(need) { 
        if (need && this.inputValue === '') {  
          this.borderColor = '#F5222D'; // 如果输入值为空，则将边框颜色设置为红色  
        } else {  
          this.borderColor = '#1DB386';
        }
      },
      blurBorderColor() {  
        if (this.inputValue === '') {  
          this.borderColor = '#F5222D'; // 如果输入值为空，则将边框颜色设置为红色  
        } else {  
          this.borderColor = '#DDD'; 
        }
      },
      changeUrl(url){
        if(/\?|&/.test(url)){
          url += '&orgId=' + this.theOrg;
        }else{
          url += '?orgId=' + this.theOrg;
        }
        console.log("changeURL:" + url);
        return url;
      },
      clewMsg(type,mes){
        var theType = '';
        switch(type){
          case 1: theType = 'success';
          case 3: theType = 'error';
          default: theType = 'warning';
        }
        this.$message({
          message: mes,
          type: theType
        });
      }
    }
  };
  </script>
  <style>
     .fieldInput{
      float: left;
      height: 40px;
      width: 100%;
      text-align: left;
      align-items: center;
     }   
     .butAdd{
      padding: 8px 10px;
      width: 60px;
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      color: #FFF;
      background: #00A578;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      justify-content: center;
      align-items: center;
    }
    .butNot{
      padding: 8px 10px;
      width: 60px;
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      color: #888;
      background: #EEE;
      border: none;
      border-radius: 8px;
      cursor: not-allowed;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 1px 1px rgba(180,180,180,0.2);
    }
    .butAdd img,.butNot img{
      height: 15px;
      width: auto;
      margin-right: 10px;
    }
    /* 组件 */
    .text{
      width: 100%;
      height: 28px;
      line-height: 28px;
      border: solid 1px #DDD;
      padding: 5px 10px;
      font-size: 15px;
      color: #222;
      border-radius: 8px;
     }
     .dateTime{
      width: 100%;
      height: 28px;
      line-height: 28px;
      border: solid 1px #DDD;
      padding: 5px 10px;
      font-size: 15px;
      color: #222;
      border-radius: 8px;
     }
     .select{
      width: 100%;
      height: 28px;
      line-height: 28px;
      border: solid 1px #DDD;
      padding: 5px 10px;
      font-size: 15px;
      color: #222;
      border-radius: 8px;
     }
     .dataSelect{
      width: calc(100% - 90px);
      height: 28px;
      line-height: 28px;
      border: solid 1px #DDD;
      padding: 5px 10px;
      font-size: 15px;
      color: #222;
      margin-right: 10px;
      border-radius: 8px;    
     }
  </style>
  